<template>
  <div class="resCommon">
    <div class="search">
        <div class="classify">
          <el-radio-group v-model="activeName" @change="toggle">
            <el-radio-button label="public">公共</el-radio-button>
            <el-radio-button label="tenant">私有</el-radio-button>
            <el-radio-button label="share">共享</el-radio-button>
          </el-radio-group>
        </div>
        <div class="searchBox">
            <search placeholder="请输入搜索内容" :live-search="true" :search-word.sync="searchName" @search="searchCon"/>
        </div>
    </div>
    <!-- 目录面包屑 -->
    <el-breadcrumb separator="/" class="breadcrumb-wrap">
      <el-breadcrumb-item></el-breadcrumb-item>
      <el-breadcrumb-item
        v-for="(item, index) in breadcrumbList"
        :key="item.id"
        @click.native="onClickBread(item, index)"
      >
        <span class="cursor">{{item.name}}</span>
      </el-breadcrumb-item>
      <el-breadcrumb-item></el-breadcrumb-item>
    </el-breadcrumb>
    <el-table v-loading="loading" :data="resourcePublic" stripe style="width: 100%">
      <el-table-column label="目录">
          <template slot-scope="scope">
              <el-button @click="menuDetail(scope.row)" type="text">{{urlHandle(scope.row.url)}}</el-button>
          </template>
      </el-table-column>
      <el-table-column label="容量配额">
          <template slot-scope="scope">
              <span>{{scope.row.capacity}} {{scope.row.unit==1?'MB':scope.row.unit==2?"GB":scope.row.unit==3?'TB':''}}</span>
          </template>
      </el-table-column>
      <el-table-column label="文件配额(个)">
          <template slot-scope="scope">
              <span>{{scope.row.fileNum}}</span>
          </template>
      </el-table-column>
      <el-table-column v-if="activeName!='tenant'&&clickStep=='1'" label="包含权限">
          <template slot-scope="scope">
              <span>{{scope.row.powerList}}</span>
          </template>
      </el-table-column>
      <el-table-column v-if="activeName=='share'&&clickStep=='1'" label="分享者">
          <template slot-scope="scope">
              <span>{{scope.row.creator}}</span>
          </template>
      </el-table-column>
      <el-table-column v-if="clickStep!=1" label="修改日期">
          <template slot-scope="scope">
              <span>{{scope.row.updDate}}</span>
          </template>
      </el-table-column>
  </el-table>
    
    <!-- 分页(默认 10条/页) -->
    <pagenation :pageInfo='pageinfo'></pagenation>
  </div>
</template>

<script>
import { mapState } from "vuex";
import resource from "@/mixins/resource";
import Pagenation from '@/components/resource/Pagenation'
import Search from '@/components/common/Search'
export default {
  mixins: [resource],
  components:{Pagenation, Search},
  data() {
    return {
      pageinfo: {
          tenantNum: 0,
          currentPage: 1
      },
      resourceId: "",
      currentPage: 1,
      breadcrumbList: [
        {
          name: "public",
          id: "0"
        }
      ],
      tenantNum: 0,
      activeName: "public",
      tenantDetail: false,
      resourcePublic: [{ url: "111" }],
      loading: false,
      formInline: {},
      isShare: "1",
      pageIndex: 1,
      pageSize: 10,
      dialogData: {
        type: "HDFS",
        label: "目录名",
        addResourceTab: false,
        titleTips: "",
        opeBtn: "",
        isDisabled: true,
        operatorTips: "",
        resOperate: false,
        editData: {}
      }
    };
  },
  mounted() {
    // 获取列表
    this.getResourceList();
  },
  computed: {
    ...mapState(["loginerName"])
  },
  methods: {
    // 查询
    search() {
      this.getResourceList(this.formInline.searchName);
    },
    // 切换公、私、共享
    toggle() {
      let tab = this.activeName;
      if (tab == "public") {
        this.breadcrumbList = [
          {
            name: "public",
            id: "0"
          }
        ];
      } else {
        this.breadcrumbList = [
          {
            name: 'dataspace',
            id: "0"
          }
        ];
      }
      this.pageIndex=1
      this.pageinfo.currentPage=1
      this.currentPage = 1;
      this.getResourceList();
    },
  }
};
</script>

<style lang="scss" scoped>
@import "../../styles/resCommon.scss";
.searchTit {
  display: flex;
  justify-content: flex-end;
  position: absolute;
  right: 0;
  top: 20px;
}
</style>